<template>
  <div>
    <div class="rmdjtop">
      <span
        class="iconfont icon-zuoyoujiantou"
        @click="$router.push('/radioStation')"
        >热门电台</span
      >
    </div>

    <div class="hotdj" v-for="(item,index) in hotdjlist" :key="index">
        <div class="hotdjimg" :style="'background-image: url(' + item.picUrl + ')'"></div>
        <p class="hotdjname">{{item.name}}</p>
        <p class="hotdjtext">{{item.copywriter}}</p>
        <p class="iconfont icon-sanjiaoxing">{{item.subCount}}</p>
    </div>
  </div>
</template>

<script>
import { getDjHot } from "../../api/base";
export default {
    data(){
        return {
            hotdjlist:[],
        }
    },
  methods: {
    getDjHotFun() {
      getDjHot().then((data) => {
        console.log(data.djRadios);
        this.hotdjlist = data.djRadios;
      });
    },
  },
  created() {
    this.getDjHotFun();
  },
};
</script>

<style lang="less">
.rmdjtop {
  height: 50px;
  position: relative;
  background-color: #d4473c;
  span {
    font-size: 18px;
    position: absolute;
    left: 12px;
    top: 12px;
    color: #fff;
  }
}
.hotdj{
    // border: 1px solid black;
    border-bottom: 1px solid #e6e6e6;
    margin: 10px 10px;
    position: relative;
    height: 100px;
    .hotdjimg{
        width: 80px;
        height: 80px;
        // border: 1px solid black;
        background-size: cover;
        margin-top: 10px;
        border-radius: 15px;
    }
    .hotdjname{
        position: absolute;
        margin-left: 100px;
        margin-top: -75px;
        font-size: 17px;
        font-weight: bold;
    }
    .hotdjtext{
        position: absolute;
        margin-left: 100px;
        margin-top: -45px;
        font-size: 14px;
        color: #898989;
    }
    .icon-sanjiaoxing{
        position: absolute;
        margin-left: 100px;
        margin-top: -20px;
        font-size: 14px;
        color: #898989;
    }
}
</style>